<template>
  <div class="contain">
    <MusicList
      :songs="songs"
      :title="singercom?.name"
      :pic="singercom?.pic"
      :loading="loading"
    ></MusicList>
  </div>
</template>

<script>
import { ref, computed, onUnmounted, onMounted } from 'vue'
import { getSingerDetail } from '@/services/singer'
import { processSongs } from '@/services/song'
import MusicList from '@/components/music-list/music-list.vue'
import storage from 'good-storage'
export default {
  name: 'SingerDetail',
  props: {
    singer: Object
  },
  components: {
    MusicList
  },
  setup (props) {
    const songs = ref([])
    // 判断是否正在加载
    const loading = ref(true)
    const singercom = computed(() => {
      const singc = props.singer.mid
        ? props.singer
        : storage.session.get('__singer__')
      return singc
    })
    loading.value = true
    onMounted(() => {
      getSingerDetail(singercom.value.mid)
        .then((res) => {
          return processSongs(res.songs)
        })
        .then((res) => {
          loading.value = false
          songs.value = res
        })
    })
    onUnmounted(() => {
      loading.value = true
    })
    // 图片和标题
    return { songs, singercom, loading }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: $color-background;
}
</style>
